<html>
<head>
    <title>运维管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .textMsg {
            white-space: pre-wrap;
            margin-left: 20px;
            line-height: 30px;
        }

        .timeTxt {
            font-size: 10px;
            color: darkgray;
        }

        .title {
            color: #4693db;
            font-size: 15px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">运维管理 › 巡检任务</div>
    <div class="page-main" style="height: 100px">
        <el-row>
            <el-col :span="4">
                <dev-tree v-on:click-node="userNode"  :tabsign="'p'"></dev-tree>
            </el-col>
            <el-col :span="20" style="background: #ffffff">
                <el-form :inline="true" style=" margin: 30px 0px 0px 30px;">
                    <el-form-item style="padding-left:20px">
                        <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="top">
                        <el-button @click="search" type="primary">查询</el-button>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item>

                        <el-button @click="addClick" type="success">新增</el-button>

                    </el-form-item>
                </el-form>


    <el-table border stripe style="width: 100%" :data="tabData">
        <el-table-column prop="patrolName" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="cycleType" label="周期类型" align="center">
        </el-table-column>
        <el-table-column prop="cycle" label="周期" align="center">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center">
        </el-table-column>
        <el-table-column prop="patrolType" label="现场勘察" align="center">
            <template slot-scope="scope">
                <div v-if="scope.row.patrolType == 0">
                    <el-tag size="medium"  type="info">否</el-tag>
                </div>
                <div v-else-if="scope.row.patrolType == 1">
                    <el-tag size="medium" type="success">是</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="300px" align="center">
            <template slot-scope="scope">
                <el-button @click="detailClick(scope.row)" round size="mini" round icon="el-icon-edit">任务配置</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page-footer">
        <el-pagination background layout="prev, pager, next" :pagesize="params.pagesize" :total="totalCount"  :current-page.sync="params.pageno" @current-change="onChangePage">
        </el-pagination>
    </div>
    <el-dialog title="新增人工巡检"
               :visible.sync="editFormVisible"
               width="35%"
               :show-close="false">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="任务名称" prop="patrolName"
                          :rules="[ {required:true,message:'任务名称不能为空!',trigger:'blur'} ]">
                <el-col :span="12">
                    <el-input v-model="form.patrolName"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="任务时间">
                <el-col :span="12">
                    <el-date-picker
                            v-model="form.startTime"
                            type="datetime"
                            placeholder="开始时间"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-col>
                <el-col :span="12">
                    <el-date-picker
                            v-model="form.endTime"
                            type="datetime"
                            placeholder="结束时间"
                            format="yyyy-MM-dd HH:mm:ss"  value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="任务周期">
                <el-col :span="12">
                    <el-select v-model="form.cycleType" placeholder="周期类型">
                        <el-option label="分" value="0"></el-option>
                        <el-option label="时" value="1"></el-option>
                        <el-option label="天" value="2"></el-option>
                        <el-option label="周" value="3"></el-option>
                        <el-option label="月" value="4"></el-option>
                        <el-option label="年" value="5"></el-option>
                    </el-select>
                </el-col>

                <el-input v-model="form.cycle" type="number" min="1" placeholder="周期时长" style="width: 220px"></el-input>

            </el-form-item>
            <el-form-item label="现场勘察" prop="patrolType">
                <el-radio-group v-model="form.patrolType" size="medium">
                    <el-radio border label="0">否</el-radio>
                    <el-radio border label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="选择设备">

                <el-select v-model="devArray" placeholder="可多选" multiple collapse-tags>
                    <el-option-group
                            v-for="group in options"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="接收人" prop="executiveId" :rules="[ {required:true,message:'接收人不能为空!',trigger:'blur'} ]">
                <el-select   @change="selectChange" v-model="form.executiveId" filterable placeholder="请选择接收人" style="width: 220px;">
                    <el-option
                            v-for="item in userList"
                            :key="item.Id"
                            :label="item.Text"
                            :value="item.Id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button @click="cancelClick" type="info">取消</el-button>
                <el-button @click="submitClick" type="primary">确定
                </el-button>

            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="任务配置"
               :visible.sync="taskVisible"
               width="35%"
               :show-close="false">
        <el-select v-model="devArray" placeholder="可多选" multiple collapse-tags>
            <el-option-group
                    v-for="group in options"
                    :key="group.label"
                    :label="group.label">
                <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-option-group>
        </el-select>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelClick">取 消</el-button>
            <el-button type="primary" @click="devAddPatrol">确 定</el-button>
        </div>
    </el-dialog>
            </el-col>
        </el-row>
    </div>

</div>

<!-- import Vue before Element -->
<script src="../../../assets/bundle.js"></script>
<!-- import JavaScript -->
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>
    let loading ;
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            params:{
                pagesize: 10,
                pageno: 1,
                projectNo: '',
            },
            form:{
                patrolType:'0'
            },
            totalCount:0,
            props: { multiple: true },
            options:[],
            devArray:[],
            userList:[],
            day: '',
            editFormVisible: false,
            taskVisible:false,
            items: [],
            editMod: false,
            tabData:[],
            patrolID: '',
            tooltip:false,
        },
        methods: {
            search: function () {
                if (this.params.projectNo ==''){
                    this.$message({
                        type: 'warning',
                        message: '请选择项目'
                    })
                    return;
                }
                this.getPatrol();
            },
            userNode:function(data){
                if (data.id.indexOf('P')==-1){
                    return;
                }
                this.params.projectNo = data.attributes.projectNo;
                this.getPatrol();
            },
            delBtn: function (id) {
                HttpUtil.get('Patrol/Delete', {id: id}).success((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getPatrol();
                })
            },
            onChangePage(page){
               this.param.pageno = page;
            },
            addClick: function () {
                if (this.params.projectNo ==''){
                    this.$message({
                        type: 'warning',
                        message: '请选择项目'
                    })
                    return;
                }
                this.editFormVisible = true;
            },
            selectChange(val){
                for (let item of this.userList) {
                    if (item.Id == val){
                        this.form.executiveName = item.Text;
                    }
                }
            },
            saveBtn() {
                this.form={
                    patrolType:'0'
                }
                this.editFormVisible = false;
                this.editMod = false;
            },
            submitClick() {
                this.$refs['form'].validate((valid) => {
                    console.log(this.form);
                    this.form.formulator = SiteConfig.account.id;
                    if (valid) {
                        HttpUtil.get('Patrol/Add',this.form).success((res)=>{
                            this.getPatrol();
                            this.editFormVisible = false;
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }


                });
            },
            cancelClick() {
                this.form={
                    patrolType:'0'
                }
                this.editFormVisible = false;
                this.taskVisible =false;
                this.devArray = [];
            },
            getPatrol() {
                HttpUtil.get('Patrol/List',this.params).success((res) => {
                    this.totalCount = res.total;
                    this.tabData = res.data;
                })
            },
            detailClick(row){
                HttpUtil.get('Patroldetail/List',{patrolID:row.patrolID}).success((res)=>{
                        this.devArray = res.data;
                        this.patrolID = row.patrolID;
                        this.taskVisible = true;
                })
            },
            devAddPatrol(){
                if (this.devArray.length == 0){
                    this.$message.info('请选择设备!');
                    return;
                } else {
                    let deviceId = this.devArray.join(',');
                    HttpUtil.get('Patroldetail/Add',{patrolID:this.patrolID,deviceId:deviceId,projectNo:'123',zoneId:136}).success((res)=>{
                        this.$message.success('添加成功');
                        this.taskVisible = false;
                    })
                }
            }
        },

        created: function () {
            this.day = TimeUtil.convertToString(new Date()).substr(0, 10);
            loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            HttpUtil.get('User/Child',{parentId:SiteConfig.account.id}).success((r)=>{
                this.userList = r.data;
            })
        },
        mounted: function () {

            HttpUtil.get('Project/DeviceByProject').success((r)=>{
                let devArr = {};
                for (let i = 0; i < r.data.length; i++) {
                    devArr[r.data[i].projectName] = [];
                }
                for (let key in devArr) {
                    let arr = [];
                    for (let m = 0; m < r.data.length; m++) {
                        if (key == r.data[m].projectName) {
                            arr.push({
                                label: r.data[m].DeviceName,
                                value: r.data[m].DeviceID,
                                deviceType: r.data[m].deviceType,
                            });
                        }
                    }
                    devArr[key] = arr;
                }
                let arry = [];
                for (let k in devArr){
                    arry.push(
                        {
                            value:k,
                            label:k,
                            options:devArr[k]
                        }
                    )
                }
                this.options = arry;
                loading.close();
            });

            this.tooltip = true;
        }
    });


</script>

</body>
<style>

</style>
</html>
